<!DOCTYPE html>
<!-- <html lang="en"> -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户端</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/jquery.magnify.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
</head>

<body>

    <div id="app">

        <div class="chat-box">
            <div class="chat-header">
                客服10165
            </div>
            <div class="chat-mian" id="chat-main">
                <template v-for="(chat,index) in chatData" :key="index">
                    <!-- 客服-文本 -->
                    <div class="info-box CS-info-box" v-if="SupportText(index)">
                        <div class="time" v-if="Long(index) || index == 0">{{chat.time}}</div>
                        <div class="avatar CS-avatar"><img src="assets/img/CS.png" alt=""></div>
                        <div class="info text-info">
                            <span></span>
                            <div v-html="chat.msg"></div>
                        </div>
                    </div>
                    <!-- 客服-图片 -->
                    <div class="info-box CS-info-box" v-if="SupportPic(index)">
                        <div class="time" v-if="Long(index) || index == 0">{{chat.time}}</div>
                        <div class="avatar CS-avatar"><img src="assets/img/CS.png" alt=""></div>
                        <div class="info img-info">
                            <img data-magnify="gallery" :data-src="chat.msg" :src="chat.msg">
                        </div>
                    </div>

                    <!-- 游客-文本 -->
                    <div class="info-box user-info-box" v-if="VisitorText(index)">
                        <div class="time" v-if="Long(index) || index == 0">{{chat.time}}</div>
                        <div class="avatar user-avatar"><img src="assets/img/user.png" alt=""></div>
                        <div class="info text-info">
                            <span></span>
                            <div v-html="chat.msg"></div>
                        </div>
                    </div>
                    <!-- 游客-图片 -->
                    <div class="info-box user-info-box" v-if="VisitorPic(index)">
                        <div class="time" v-if="Long(index) || index == 0">{{chat.time}}</div>
                        <div class="avatar user-avatar"><img src="assets/img/user.png" alt=""></div>
                        <div class="info img-info">
                            <img data-magnify="gallery" :data-src="chat.msg" :src="chat.msg">
                        </div>
                    </div>
                </template>

                <!-- <div class="change-but"></div> -->
            </div>
            <div class="chat-edit">
                <div id="editor"></div>
                <button class="send-button" id="submit" @click="Send">发送</button>
            </div>
        </div>

    </div>



    <script type="text/javascript" src="assets/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery.magnify.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/js/wangEditor.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    <!-- <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> -->
    <script>
        var _chathost = document.location.hostname;
        console.log(_chathost);
    </script>
</body>

</html>